<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-primary bg-opacity-10">
<div class="container-fluid" style="padding-top: 80px">
    <div class="row" style="height: 550px">
        <div class="col "></div>
        <div class="col d-flex flex-row align-items-center">
            <div class=" w-75 bg-white mx-auto border-dark-subtle border" style="border-radius:20px"><!--中间列-->
                <div class=" border-bottom border-dark-subtle position-relative" style="height: 110px">
                    <div class="text-center pt-4 fs-3">极致美化</div>
                    <div class="w-50 text-center text-black-50 bg-white position-absolute top-100 start-50 translate-middle ">登录即可打开新世界大门</div>
                </div>
                <!--  表单-->
                <div class="pt-5" style="height: 360px">
                    <p class="text-center table-light text-black-50">登录</p>
                    <form class="px-4" method="post" action="">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control bg-transparent" value="" id="username" name="username" placeholder="">
                            <label for="username">登录用户名</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="password" class="form-control bg-transparent" id="password" name="password" placeholder="">
                            <label for="password">密码</label>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="remember" name="remember" value="1">
                            <label class="form-check-label" for="remember">记住用户名</label>
                        </div>
                        <div class="d-flex flex-row justify-content-between mb-3" style="font-size: 0.8em">
                            <a href="" class="text-decoration-none text-success">忘记密码</a>
                            <a href="register.html" class="text-decoration-none text-success">新用户？注册</a>
                        </div>
                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-success" style="font-size: 0.9em">快速登录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="myToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="img/logo.png" width="81px" class="rounded me-2" alt="...">
            <strong class="me-auto">极致美化-资源</strong>
            <small>通知</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
        </div>
    </div>
</div>
</body>
</html>
